window.onload = function () {

  //功能1：头部滚动的时候吸顶效果 
  let header_con = document.querySelector(".header-con")
  document.onscroll = function () {
    if (scrollY >= 0) {
      header_con.style.position = "fixed"
      header_con.style.top = "0"
    } else {
      header_con.style.position = "relative"
    }
  }

  //头部的搜索按钮
  let search = document.querySelector(".header-con .search")
  let searchBtn = document.querySelector(".header-con .search .searchBtn")
  let searchBar = document.querySelector(".header-con .search .searchBar")
  searchBtn.onclick = function () {
    //点击这个搜索按钮，弹出搜索框，就是需要添加类active
    searchBar.focus()
    searchBar.className = "searchBar active"
  }
  search.onclick = function (e) {
    //阻止冒泡事件传播
    e.stopPropagation()
  }
  document.onclick = function (e) {
    searchBar.className = "searchBar"
  }

  //侧边栏 返回顶部
  let goback_box = document.querySelector(".goback_box")
  window.onscroll = function () {
    if (scrollY >= 110) {
      goback_box.style.display = "block"
    } else {
      goback_box.style.display = "none"
    }
  }
  var backTimer;
  goback_box.onclick = function () {
    clearInterval(backTimer)
    backTimer = setInterval(function () {
      scrollTo({
        top: scrollY - 20
      })
      if (scrollY <= 0) {
        clearInterval(backTimer)
      }
    }, 10)
    console.log(backTimer);
  }


  //选项卡
  let tab = document.querySelector(".tab") //选项卡
  let tab_hd = tab.querySelector(".tab-hd") //选项卡头部
  let lis = tab_hd.querySelectorAll("ul>li") //选项卡的li

  let tab_td = tab.querySelector(".tab-td") //选项卡内容区域
  let conList = tab_td.querySelectorAll(".tab-con")
  //点击选项卡
  lis.forEach((items, i) => {
    //点击事件
    lis[i].onclick = function () {
      //排他思想
      lis.forEach((items, i) => {
        lis[i].className = ""
        conList[i].className = "tab-con"
      })
      //保留自身
      this.className = "hd_active"
      conList[i].className = "td_active"
    }
  })

  //最新新闻数据
  let tabItemDate = [{
    tag: "APP推广",
    imgUrl: "upload/tab-td01.jpg",
    title: "直播带货爆火公式详解",
    con: "在流量红利逐渐趋紧的大环境下，流量稀缺性更是引发了各大平台的争夺战，随之出现了电商平台内容化、内容平台电商化、社交平台电商化等有趣的现象，而腾讯直播恰好踩中了在社交平台+内容电商的…...",
    time: "50秒前",
    num: "533k"
  }, {
    tag: "APP推广",
    imgUrl: "upload/tab-td01.jpg",
    title: "11月金融行业广告投放技巧",
    con: "互联网产品竞争越来越激烈，用户获取也越来越难。本文作者从线上、线下两方面，各分析了几种引流方法的利弊，快来学习一下。互联网时代媒体碎片化、用户圈子化、生活方式多...",
    time: "50秒前",
    num: "533k"
  }, {
    tag: "APP推广",
    imgUrl: "upload/tab-td01.jpg",
    title: "11月金融行业广告投放技巧",
    con: "互联网产品竞争越来越激烈，用户获取也越来越难。本文作者从线上、线下两方面，各分析了几种引流方法的利弊，快来学习一下。互联网时代媒体碎片化、用户圈子化、生活方式多...",
    time: "50秒前",
    num: "533k"
  }, {
    tag: "APP推广",
    imgUrl: "upload/tab-td01.jpg",
    title: "11月金融行业广告投放技巧",
    con: "互联网产品竞争越来越激烈，用户获取也越来越难。本文作者从线上、线下两方面，各分析了几种引流方法的利弊，快来学习一下。互联网时代媒体碎片化、用户圈子化、生活方式多...",
    time: "50秒前",
    num: "533k"
  }, {
    tag: "APP推广",
    imgUrl: "upload/tab-td01.jpg",
    title: "11月金融行业广告投放技巧",
    con: "互联网产品竞争越来越激烈，用户获取也越来越难。本文作者从线上、线下两方面，各分析了几种引流方法的利弊，快来学习一下。互联网时代媒体碎片化、用户圈子化、生活方式多...",
    time: "50秒前",
    num: "533k"
  }, {
    tag: "APP推广",
    imgUrl: "upload/tab-td01.jpg",
    title: "11月金融行业广告投放技巧",
    con: "互联网产品竞争越来越激烈，用户获取也越来越难。本文作者从线上、线下两方面，各分析了几种引流方法的利弊，快来学习一下。互联网时代媒体碎片化、用户圈子化、生活方式多...",
    time: "50秒前",
    num: "533k"
  }]
  //渲染选项卡
  //最新新闻
  let tab_con = document.querySelector(".tab-td .tab-con")
  // console.log(tab_con);
  tabRender(tab_con, tabItemDate)

  //APP推广的数据
  let appDate = [{
    tag: "APP推广",
    imgUrl: "upload/tab-td01.jpg",
    title: "线上、线下平台引流方法！",
    con: "互联网产品竞争越来越激烈，用户获取也越来越难。本文作者从线上、线下两方面，各分析了几种引流方法的利弊，快来学习一下。 互联网时代媒体碎片化、用户圈子化、生活方式多元化…+内容电商的…...",
    time: "1天前",
    num: "6.29k"
  }, {
    tag: "APP推广",
    imgUrl: "upload/tab-td01.jpg",
    title: "目前最有效的 App 推广渠道盘点！",
    con: "APP推广到底是干什么的？是应用商店的渠道推广？还是媒介广告投放推广？还是商务合作推广？还是公关营销推广？首先我们要明白互联网公司市场部的作用，我们可以把它分为两大类。作者 华旭东…...",
    time: "1天前",
    num: "5.3k"
  }, {
    tag: "APP推广",
    imgUrl: "upload/tab-td01.jpg",
    title: "飞猪产品分析报告",
    con: "  本篇给大家分享的是医疗行业搜索小渠道优化案例，一个月时间成本降低80%看看他是如何用做到的。 我所说的小渠道主要指的是搜狗，神马，360三个渠道。 很多时候大家只注重…...",
    time: "1天前",
    num: "2。7k"
  }, {
    tag: "APP推广",
    imgUrl: "upload/tab-td01.jpg",
    title: "11月金融行业广告投放技巧",
    con: "互联网产品竞争越来越激烈，用户获取也越来越难。本文作者从线上、线下两方面，各分析了几种引流方法的利弊，快来学习一下。互联网时代媒体碎片化、用户圈子化、生活方式多...",
    time: "50秒前",
    num: "533k"
  }, {
    tag: "APP推广",
    imgUrl: "upload/tab-td01.jpg",
    title: "11月金融行业广告投放技巧",
    con: "互联网产品竞争越来越激烈，用户获取也越来越难。本文作者从线上、线下两方面，各分析了几种引流方法的利弊，快来学习一下。互联网时代媒体碎片化、用户圈子化、生活方式多...",
    time: "50秒前",
    num: "533k"
  }, {
    tag: "APP推广",
    imgUrl: "upload/tab-td01.jpg",
    title: "11月金融行业广告投放技巧",
    con: "互联网产品竞争越来越激烈，用户获取也越来越难。本文作者从线上、线下两方面，各分析了几种引流方法的利弊，快来学习一下。互联网时代媒体碎片化、用户圈子化、生活方式多...",
    time: "50秒前",
    num: "533k"
  }]
  //APP推广
  let tab_app = document.querySelector(".tab-td>.tab-con:nth-child(2)")
  // console.log(tab_app);
  tabRender(tab_app, appDate)

  //这是渲染选项卡的函数
  function tabRender(ele, date) {
    for (var i = 0; i < date.length; i++) {
      ele.innerHTML += `
      <div class="tab-item clear_fix">
        <a title="${date[i].title}" class="tab-item-l a_scale " href="###">
          <img class="a_scale-img " src="${date[i].imgUrl}" alt="">
          <div class="tag">${date[i].tag}</div>
        </a>
        <div class="tab-item-r">
          <h3>${date[i].title}</h3>
          <p>${date[i].con}</p>
          <div class="read-num">
            <span>${date[i].time}</span>
            <span class="iconfont icon-yanjing"></span>
            <span>${date[i].num}</span>
          </div>
        </div>
      </div>
    `
    }
  }


  //热门文章
  let hotDate = [{
    imgUrl: "upload/r_aside01.jpg",
    con: "APP运营干货｜应用宝“清词”补救指南！",
    times: "2019年5月8日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "广场舞类APP竞品分析报告：还未体现出广场舞市...",
    times: "2017年5月10日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "青瓜早报：深圳等多地约谈滴滴，整改不到位将...",
    times: "2018年8月28日"
  }]
  // 热门文章
  let main_r = document.querySelector(".main-r");
  let hot_r_box = main_r.querySelector(".hot-r-box") //推荐文章区域
  let hot_r_td = hot_r_box.querySelector(".hot-r-td")
  // console.log(hot_r_td);

  //渲染推荐文章！
  render(hot_r_td, hotDate)

  let recommendDate = [{
    imgUrl: "upload/r_aside01.jpg",
    con: "如何运用大数据做营销？",
    times: "2019年6月10日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "今日头条视频信息流广告营销方案!",
    times: "2019年6月10日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "游戏出海如何突围实现用户增长？",
    times: "2019年6月10日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "金融行业信息流投放方法论及金融客户投放案例",
    times: "2019年6月10日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "从0到1，解读安卓ASO优化！",
    times: "2019年6月10日"
  }]

  // 推荐文章
  let recommend_r_td = document.querySelector(".main-r .hot-r-box .recommend-r-td")
  // console.log(recommend_r_td);

  //渲染推荐文章！
  render(recommend_r_td, recommendDate)

  let classicsDate = [{
    imgUrl: "upload/r_aside01.jpg",
    con: "APP推广路数那么多，带你深度解析积分墙！",
    times: "2016年9月7日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "送你6招标题技巧，轻松引爆阅读量（一看就会）",
    times: "2017年3月10日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "知识付费，爆款的逻辑",
    times: "2017年6月12日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "《QQ飞车》手游今日上线，欲在移动领域重塑端...",
    times: "2017年12月28日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "百度推广聚屏广告物料审核与开户资质要求！",
    times: "2019年6月23日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "2018全球Top52手游发行商榜单发布！",
    times: "2019年2月26日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "百度信息流推广产品手册",
    times: "2019年12月4日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "节日品牌营销推广技巧策略！",
    times: "2019年8月9日"
  }, {
    imgUrl: "upload/r_aside01.jpg",
    con: "节日品牌营销推广技巧策略！",
    times: "2019年8月9日"
  }]
  // 经典文章 classics 
  let classics_r_td = document.querySelector(".main-r .hot-r-box .classics-r-td")
  // console.log(classics_r_td);

  //渲染推荐文章！
  render(classics_r_td, classicsDate)

  let hotTagDate = [{
    item: "APP推广"
  }, {
    item: "ASO"
  }, {
    item: "ASO优化"
  }, {
    item: "pr"
  }, {
    item: "互联网"
  }, {
    item: "信息流"
  }, {
    item: "信息流..."
  }, {
    item: "公众号"
  }, {
    item: "创业"
  }, {
    item: "品牌"
  }, {
    item: "工具"
  }, {
    item: "干货"
  }, {
    item: "广告投放"
  }, {
    item: "得到"
  }, {
    item: "微信"
  }, {
    item: "微信公..."
  }, {
    item: "投资"
  }, {
    item: "推广"
  }, {
    item: "文案"
  }, {
    item: "朋友圈"
  }, {
    item: "浏览"
  }, {
    item: "APP推广"
  }, {
    item: "APP推广"
  }, {
    item: "APP推广"
  }, {
    item: "APP推广"
  }, {
    item: "APP推广"
  }, {
    item: "APP推广"
  }, {
    item: "APP推广"
  }, {
    item: "APP推广"
  }, {
    item: "APP推广"
  }]
  //热门标签
  let hot_tag_td = document.querySelector(".hot-tag .hot-tag-td")
  // console.log(hot_tag_td);
  for (var i = 0; i < hotTagDate.length; i++) {
    hot_tag_td.innerHTML += `
    <span class="hot-tag-item">
    ${hotTagDate[i].item}
  </span>
    `
  }

  //渲染右侧函数
  function render(ele, date) {
    for (var i = 0; i < date.length; i++) {
      ele.innerHTML += `
      <div class="hot-r-item">
         <a title="${date[i].con}" class="a_scale" href="###"><img class="a_scale_img" src="${date[i].imgUrl}" alt=""></a>
        <p>
        ${date[i].con}
        </p>
        <div class="time">${date[i].times}</div>
      </div>
  `
    }
  }

  // // 滚动到经典文章底部的时候，热门标签区域就修改为fixed 滚动事件
  // let hot_tag = document.querySelector(".hot-tag")
  // document.onscroll = function () {
  //   let hotTagTop = hot_tag.offsetTop - 20; //2119
  //   if (scrollY >= hotTagTop) {
  //     hot_tag.style.position = "fixed"
  //     hot_tag.style.top = 20 + "px"
  //   }
  // }


  //渲染友情链接
  let linksDate = [{
    link: "5118大数据"
  }, {
    link: "51LA"
  }, {
    link: "APP推广"
  }, {
    link: "ASO优化"
  }, {
    link: "CPA之家"
  }, {
    link: "天猫店铺转让"
  }, {
    link: "法律快车"
  }, {
    link: "游戏陀螺"
  }, {
    link: " 白鲸出海"
  }, {
    link: "积分墙投放"
  }, {
    link: "跨境电商"
  }, {
    link: "跨境电商市场"
  }, {
    link: "运营大叔"
  }, {
    link: "青瓜传媒"
  }]
  let linkList = document.querySelector(".link-con .link-td")
  // console.log(linkList);
  for (var i = 0; i < linksDate.length; i++) {
    linkList.innerHTML += `
    <a href="###">${linksDate[i].link}</a>
    `
  }


  //渲染底部的链接
  let aListDate = [{
    aList: "首页"
  }, {
    aList: "推广"
  }, {
    aList: "运营"
  }, {
    aList: "营销"
  }, {
    aList: "青瓜早报"
  }, {
    aList: "推广服务"
  }, {
    aList: "联系我们"
  }]
  let links = document.querySelector(".fotter-con .links")
  aRender(links, aListDate)

  let copyDate = [{
    aList: "Copyright © 2014-2020"
  }, {
    aList: "青瓜传媒"
  }, {
    aList: "OPP2.com"
  }, {
    aList: "版权所有"
  }, {
    aList: " 免责声明 "
  }, {
    aList: "网址导航"
  }, {
    aList: "标签归档"
  }, {
    aList: "联系我们"
  }, {
    aList: "闽ICP备14005448号-1"
  }]

  //底部渲染函数
  function aRender(ele, date) {
    for (var i = 0; i < date.length; i++) {
      ele.innerHTML += `
    <a href="###">${date[i].aList}</a>
    `
    }
  }






}